<template>
	<view>
		<u-navbar title="今天吃什么" title-color="#FFF" :background="navBackground" :is-fixed="true" :border-bottom="false" :is-back="true" back-icon-color="#FFF"></u-navbar>
		<liuxing></liuxing>
		<view class="content w-100 bor-box z-relative">
			<xingqiu-tag :automaticRotate="automaticRotate" :canTouch="canTouch"></xingqiu-tag>
			<view class="btns d-flex-around">
				<text class="btn radius-10" @click="goMenus">编辑菜单</text>
				<text class="btn radius-10" @click="getFood">开始选菜</text>
				<text class="btn radius-10" @click="showPop">当前菜单</text>
			</view>
			<u-popup v-model="popShow" mode="center" width="500rpx" border-radius="20" closeable length="auto">
				<view class="scroll-box" v-if="choosedFood.length > 0">
					<scroll-view scroll-y="true" class="scroll w-100 bor-box">
						<view class="d-flex flex-wrap list">
							<view class="item radius-10" v-for="(t, i) in choosedFood" :key="i">
								<text>{{ t }}</text>
							</view>
						</view>
					</scroll-view>
					<view class="btns btn-in d-flex-center"><text class="btn radius-10" @click="resetChoosed">清空</text></view>
				</view>
				<view class="none-box z-relative" v-else>
					<image src="/static/img/img/defaultmap/img_01.png" mode="widthFix" class="defaultmap-img d-block margin-0-auto"></image>
					<text class="t z-absolute">还没有菜单哦，赶紧去选一个菜吧~</text>
				</view>
			</u-popup>
			<u-modal v-model="modalShow" :content="modalContent" confirm-text="好的" confirm-color="#097a9b"></u-modal>
		</view>
	</view>
</template>

<script>
import xingqiuTag from '@/components/xingqiu-tag/xingqiu-tag.vue';
import liuxing from '@/components/liuxing/liuxing.vue';
export default {
	components: {
		xingqiuTag,
		liuxing
	},
	data() {
		return {
			navBackground: this.$navBackground,
			menus: '',
			foodsList: [],
			choosedFood: [],
			popShow: false,
			automaticRotate: 10,
			canTouch: true,
			modalShow:false,
			modalContent:''
		};
	},
	onLoad() {
		this.getMenu();
	},
	methods: {
		// 获取菜单
		getMenu() {
			this.$cloudApi.call({
				name: 'menus',
				data: {
					action: 'get'
				},
				success: res => {
					this.menus = res.data;
					this.resetChoosed();
					uni.setStorageSync('menus', res.data);
				},
				fail: err => {
					console.log(err);
				}
			});
		},
		// 重置
		resetChoosed() {
			this.foodsList = [...this.menus.menus[0]];
			this.choosedFood = [];
		},
		// 开始
		getFood() {
			if(!this.canTouch){return}
			if (this.foodsList.length > 0) {
				this.automaticRotate = 0.1;
				this.canTouch = false;
				let i = this.$u.random(0, this.foodsList.length - 1);
				this.choosedFood.push(this.foodsList[i]);
				this.foodsList.splice(i, 1);
				setTimeout(()=>{
					this.modalShow=true;
					this.modalContent=`吃个${this.choosedFood[this.choosedFood.length-1]}吧`
					this.automaticRotate = 10;
					this.canTouch = true;
				},2500)
			} else {
				this.$tools.showToast('没有更多的菜了~');
			}
		},
		// 跳转菜单详情
		goMenus() {
			if(!this.canTouch){return}
			this.$tools.goPage('menu');
		},
		showPop(){
			if(!this.canTouch){return}
			this.popShow = true;
		}
	}
};
</script>

<style lang="scss">
.content {
	padding: 20rpx 32rpx;
	z-index: 2;
	.scroll-box {
		padding-top: 90rpx;
		.scroll {
			height: 24vh;
			border-radius: 20rpx;
			padding: 30rpx;
			padding-top: 0;
			.list {
				.item {
					padding: 6rpx 10rpx;
					background: $tian-main-color;
					color: #ffffff;
					margin-bottom: 10rpx;
					margin-right: 10rpx;
				}
			}
		}
	}
	.btns {
		margin-top: 30rpx;
		&.btn-in {
			margin-top: 0;
			padding-bottom: 30rpx;
		}
		.btn {
			padding: 10rpx 20rpx;
			background: $tian-main-color;
			color: #ffffff;
		}
	}
	.none-box {
		.defaultmap-img {
			width: 400rpx;
		}
		.t {
			width: 100%;
			text-align: center;
			left: 0;
			bottom: 20rpx;
			font-size: 12px;
			color: #909399;
		}
	}
}
</style>
